//   岗位页面 PostSkill   *********************** *********************** ***********************
import React, { useContext, useEffect, useState } from "react"
import { getAudit, getDeleteStation, getRevocation, getSkillList } from "@/services/index"
import { ISkillLabel, ISkillListQuery, ISkillList } from "@/utils"
import './postSkill.less'
import { Table, Input, Button, Breadcrumb, Space, message, Popconfirm } from 'antd';
import { EyeOutlined, RollbackOutlined, FormOutlined, DeleteOutlined, DeliveredProcedureOutlined, SearchOutlined } from '@ant-design/icons';
import styles from "./postSkill.less";
import "./postSkill.less";
import { observer } from "mobx-react-lite"
import storeContext from "@/context/storeContext";
import { Link } from "umi";


const arr = ['全部', "草稿", "已发布", '待审核', '已驳回']


const postSkill: React.FC = props => {
    let [skillLabel, setSkillLabel] = useState<ISkillLabel[]>([])
    let [subs, setSubs] = useState('')
    let [sub, setSub] = useState(0)
    let [queryParams, setQueryParams] = useState<ISkillListQuery>({ isAsc: 'desc', searchTitle: '', pageNum: 1, pageSize: 10, isMyInfo: false } as ISkillListQuery)
    let [skillList, setSkillList] = useState<ISkillList[]>()
    let [isMyInfo, setMyInfo] = useState(false);
    let [title, setTitle] = useState('');
    let [searchTitle, setSearchTitle] = useState('');
    let [stationVersionId, setStationVersionId] = useState('')//删除
    let [audit, setAudit] = useState('')//审核
    let [revocation, setRevocation] = useState('')

    let { skill } = useContext(storeContext)

    const text = '确定删除？';

    function confirm() {
        // 删除
        getDeleteStation({ stationVersionId }).then(ok => {
            if (ok.code == 200) {
                message.success('删除成功')
                getSkillList(queryParams).then(ok => {
                    if (ok.code == 200) {
                        setSkillList(ok.rows)
                    }
                })
            }
        })
    }

    const columns = [
        {
            title: '岗位名称',
            dataIndex: 'name',
            align: "center"
        },
        {
            title: '专业',
            dataIndex: 'majorName',
            align: "center"
        },
        {
            title: '版本号',
            dataIndex: 'stationVersion',
            align: "center"
        },
        {
            title: '技能数量',
            dataIndex: 'skillNum',
            align: "center"
        },
        {
            title: '作者',
            dataIndex: 'userName',
            align: "center"
        },
        {
            title: '时间',
            dataIndex: 'createTime',
            align: "center"
        },
        {
            title: '状态',
            dataIndex: 'status',
            align: "center",
            render: (status: ISkillList) => {
                if (Number(status) == 1) {
                    return <span>草稿</span>
                } else if (Number(status) == 2) {
                    return <span style={{ color: "#29cb97" }}>已发布</span>
                } else if (Number(status) == 3) {
                    return <span style={{ color: "rgb(65, 157, 233)" }}>待审核</span>
                } else {
                    return <span>已驳回</span>
                }
            }
        },
        {
            title: '操作',
            align: "center",
            render: (row: ISkillList) => {
                if (Number(row.status) === 1) {
                    return <div className={styles.action}>

                        <Link to={`/teachers/addPostSkill?stationVersionId=${row.stationVersionId}&see=false`}>
                            <FormOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                        </Link>

                        <DeliveredProcedureOutlined
                            style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }}
                            onClick={() => { setAudit(row.stationVersionId) }}
                        />

                        <Space>
                            <Popconfirm
                                placement="bottomLeft"
                                title={text}
                                onConfirm={confirm}
                                okText="Yes"
                                cancelText="No"
                            >
                                <DeleteOutlined
                                    onClick={() => { setStationVersionId(row.stationVersionId) }}
                                    style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                            </Popconfirm>
                        </Space>
                    </div>
                } else if (Number(row.status) === 2) {
                    return <div className={styles.action}>
                        <EyeOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                    </div>
                } else if (Number(row.status) === 3) {
                    return <div className={styles.action}>
                        <Link to={`/teachers/addPostSkill?stationVersionId=${row.stationVersionId}&see=false`}>
                            <EyeOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                        </Link>

                        <RollbackOutlined
                            style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }}
                            onClick={() => { setRevocation(row.stationVersionId), console.log(row.stationVersionId) }} />
                    </div>
                } else if (Number(row.status) === 4) {
                    return <div className={styles.action}>
                        <Link to={`/teachers/addPostSkill?stationVersionId=${row.stationVersionId}&see=false`}>
                            <DeleteOutlined style={{ color: '#679cf6', fontSize: "20px", padding: "0 5px" }} />
                        </Link>
                    </div>
                }
            }
        }
    ];
    // 发送请求
    useEffect(() => {
        skill.getSkillLabel()
    }, [])

    // 列表
    useEffect(() => {
        if (sub) {
            queryParams = { ...queryParams, majorId: subs, status: sub, isMyInfo, searchTitle: title }
        } else {
            queryParams = { ...queryParams, majorId: subs, status: "" as unknown as number, isMyInfo, searchTitle: title }
        }

        // 数据获取
        getSkillList(queryParams).then(ok => {
            if (ok.code == 200) {
                setSkillList(ok.rows)
            }
        })


        // 提交审核
        getAudit({ params: { stationVersionId: audit } }).then(ok => {
            if (ok.code == 200) {
                message.success('提交审核')
                getSkillList(queryParams).then(ok => {
                    if (ok.code == 200) {
                        setSkillList(ok.rows)
                    }
                })
            }
        })

        //撤销审核
        getRevocation({ params: { stationVersionId: revocation } }).then(ok => {
            if (ok.code == 200) {
                message.success('撤销成功')
                getSkillList(queryParams).then(ok => {
                    if (ok.code == 200) {
                        setSkillList(ok.rows)
                    }
                })
            }
        })
    }, [subs, sub, isMyInfo, searchTitle, stationVersionId, audit, revocation])

    return <div className={styles.postSkill}>
        <Breadcrumb style={{ padding: "16px", margin: "5px 0 0 22px", fontSize: "15px" }}>
            <Breadcrumb.Item>岗位</Breadcrumb.Item>
            <Breadcrumb.Item>岗位管理</Breadcrumb.Item>
        </Breadcrumb>
        <div className={styles.headers}>
            <div className={styles.header1}>
                <div className={styles.header_left1}>专业：</div>
                <div className={styles.header_right}>
                    <span className={subs == '' ? styles.active : ''} onClick={() => { setSubs('') }}>全部</span>
                    {
                        skill.skillLabel.map((item: { id: React.SetStateAction<string>; name: boolean | React.ReactChild | React.ReactFragment | React.ReactPortal | null | undefined; }, index: React.Key | null | undefined) => <span className={item.id == subs ? styles.active : ''}
                            onClick={(e) => { setSubs(item.id) }} key={item.id as string}>{item.name}</span>)
                    }
                </div>
            </div>

            <div className={styles.header2}>
                <div className={styles.header_left2}>状态：</div>
                <div className={styles.header_right}>
                    {
                        arr.map((item, index) => <span className={index == sub ? styles.act : ''} onClick={() => { setSub(index) }} key={item}>{item}</span>)
                    }
                </div>
            </div>
        </div>

        <div className={styles.main}>
            <div className={styles.nav}>
                <div></div>
                <span> <input type="checkbox" checked={isMyInfo} onChange={e => { console.log(e.target.checked); setMyInfo(e.target.checked) }} />只看我的</span>
                <span className={styles.spans}> <Input placeholder="搜索岗位" suffix={<SearchOutlined onClick={() => setSearchTitle(title)} />} value={title} onChange={e => setTitle(e.target.value)} onKeyDown={e => {
                    if (e.keyCode === 13) {
                        setSearchTitle(title)
                    }
                }} /></span>
                <Link to='/teachers/addPostSkill?see=false'>
                    <Button
                        type="primary"
                        style={{ margin: "15px 30px 15px 15px", width: "100px", fontSize: "15px", height: "35px", lineHeight: "35px", textAlign: "center", display: "flex", justifyContent: "center", alignItems: "center" }}>+添加岗位</Button>
                </Link>
            </div>

            <Table style={{ width: "95%", margin: "0 auto", textAlign: "center" }} rowKey="stationId" dataSource={skillList as ISkillList[]} columns={columns as any} />
        </div>
    </div>
}

export default observer(postSkill);

